<template>
    <div class="vaddress">
     <vheader :is-left="true" title="请选择收货地址"/>
     <div class="city_search">
         <div class="search">
             <span class="city" @click="$router.push({name:'selectCity'})" > 
                {{city}}
             </span>
             <!-- 下箭头 -->
             <i class="fa fa-angle-down"></i>
             <i class="fa fa-search"></i>
             <input type="text" v-model="search_val" placeholder="小区/写字楼/学校等">
         </div>
         <location :address="this.$store.getters.address"/>
     </div>
     <div class="area">
         <ul class="area_list" v-for="(item,index) in areaList">
             <li @click="selectAddress(item)">
                 <h4>{{item.name}}</h4>
                 <p>{{item.district}}{{item.address}}</p>
             </li>
         </ul>
     </div>
    
    </div>
  </template>

<script>
    import vheader from '../components/vheader.vue';
    import location from '../components/location.vue'
    export default {
        name: 'vaddress',
        components: {
            vheader,
            location
        },
        data() {
            return {
                city: "", //当前的城市
                search_val: "", //搜索的值
                areaList: [], //搜索后显示的结果存放到一个数组
            }
        },
        computed: {
            address() {
                return this.$store.getters.location.formattedAddress
            }
        },
        //进入vaddress这个组件的时候to属性带有city属性
        beforeRouteEnter(to, from, next) {
            //console.log(to.params.city);
            next(vm => {
                //把传进来的city属性赋值给该页面的city
                vm.city = to.params.city
            })
        },
        watch: {
            search_val() {
                this.searchPlace();
            }
        },
        methods: {
            //请选择收货地址下的 搜索框 
            searchPlace() {
                // console.log(this.search_val);
                const self = this;
                AMap.plugin('AMap.Autocomplete', function() {
                    // 实例化Autocomplete
                    var autoOptions = {
                        //city 限定城市，默认全国
                        city: self.city
                    }
                    var autoComplete = new AMap.Autocomplete(autoOptions);
                    autoComplete.search(self.search_val, function(status, result) {
                        // 搜索成功时，result即是对应的匹配数据
                        console.log(result);
                        self.areaList = result.tips
                    })
                })
            },
            //选择地址并传值给首页上方
            selectAddress(item) {
                //把自动选择的地址保存在Vuex
                this.$store.dispatch("setAddress", item.district + item.address + item.name);
                //点击后带参数进行跳转到首页
                this.$router.push('/home');
                this.$store.dispatch('setLocation', {
                    //包含城市省份
                    addressComponens: {
                        city: item.district.substring(3, 6),
                        province: item.name
                    },

                });
            }
        }
    }
</script>
<style scoped>
    .vaddress {
        width: 100%;
        height: 100%;
        overflow: auto;
        box-sizing: border-box;
        padding-top: 45px;
    }
    
    .city_search {
        background-color: #fff;
        padding: 10px 20px;
        color: #333;
    }
    
    .search {
        background-color: #eee;
        height: 40px;
        border-radius: 10px;
        box-sizing: border-box;
        line-height: 40px;
    }
    
    .search .city {
        padding: 0 10px;
    }
    
    .city i {
        margin-right: 10px;
    }
    
    .search input {
        margin-left: 5px;
        background-color: #eee;
        outline: none;
        border: none;
    }
    
    .area {
        margin-top: 16px;
        background: #fff;
    }
    
    .area li {
        border-bottom: 1px solid #eee;
        padding: 8px 16px;
        color: #aaa;
    }
    
    .area li h4 {
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
    }
</style>